<template >
    <div class="box1">
        <div class="manage-left">
            <div class="manage-left-top">日志源分类</div>
            <div class="manage-left-tree">
                <el-tree
                    :data="data"
                    node-key="id"
                    default-expand-all
                    @node-contextmenu="rightClick"
                    @node-drag-start="handleDragStart"
                    @node-drag-enter="handleDragEnter"
                    @node-drag-leave="handleDragLeave"
                    @node-drag-over="handleDragOver"
                    @node-drag-end="handleDragEnd"
                    @node-drop="handleDrop"
                    draggable
                    :allow-drop="allowDrop"
                    :allow-drag="allowDrag">
                </el-tree>
            </div>
            <div v-show="menuVisible">
              <ul id="menu" class="menu">
                <li class="menu__item" @click="isAddCardPing = true">平级添加</li>
                <li class="menu__item" @click="addCard">下级添加</li>
                <li class="menu__item" @click="deleteCard">删除</li>
              </ul>
            </div>
        </div>
        <div class="manage-right">
            <div class="manage-right-top">
                日志源列表
            </div>
             <div class="form">
                 <div class="button">
                     <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.$index, scope.row)">激活</el-button>
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleremove(scope.$index, scope.row)">取消</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                 </div>
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="日期"
                    width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="地址"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleremove(scope.$index, scope.row)">取消</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <div class="form-footer" >
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="current_change"
                    :current-page='1'
                    :page-size="10"
                    :total="111">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";

    @Component
    export default class LogList extends Vue {
        private data:any =[{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 8,
              label: '三级 1-1-1'
            }, {
              id: 9,
              label: '三级 1-1-2'
            }]
          },{
            id: 5,
            label: '二级 1-1',
            children: [{
              id: 10,
              label: '三级 1-1-1'
            }, {
              id: 11,
              label: '三级 1-1-2'
            }]
          },{
            id: 6,
            label: '二级 1-1',
            children: [{
              id: 12,
              label: '三级 1-1-1'
            }, {
              id: 13,
              label: '三级 1-1-2'
            }]
          },{
            id: 7,
            label: '二级 1-1',
            children: [{
              id: 14,
              label: '三级 1-1-1'
            }, {
              id: 15,
              label: '三级 1-1-2'
            }]
          }]
        }]
        private  defaultProps: object = {
          children: 'children',
          label: 'label'
        }
        private loading :boolean =false
        private tableData:any= [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
       private  multipleSelection :any = []
       //右击菜单的显示和隐藏
       private menuVisible:boolean =false
        public mounted() {

        }
        //  树的操作        
        public handleDragStart(node :any, ev:any) {
        console.log('drag start', node);
        }
        public handleDragEnter(draggingNode:any, dropNode:any, e:any) {
            console.log('tree drag enter: ', dropNode.label);
        }
        public handleDragLeave(draggingNode:any, dropNode:any, ev:any) {
            console.log('tree drag leave: ', dropNode.label);
        }
        public handleDragOver(draggingNode:any, dropNode:any, ev:any) {
            console.log('tree drag over: ', dropNode.label);
        }
        public handleDragEnd(draggingNode:any, dropNode:any, dropType:any, ev:any) {
            console.log('tree drag end: ', dropNode && dropNode.label, dropType);
        }
        public handleDrop(draggingNode:any, dropNode:any, dropType:any, ev:any) {
            console.log('tree drop: ', dropNode.label, dropType);
        }
        public allowDrop(draggingNode:any, dropNode:any, type:any) {
            if (dropNode.data.label === '二级 3-1') {
            return type !== 'inner';
            } else {
            return true;
            }
        }
        public allowDrag(draggingNode:any) {
            return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
        }
        
        //右击菜单

        public rightClick(MouseEvent:any, object:any, Node:any, element:any):any { // 鼠标右击触发事件
          this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
          this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
          var menu:any = document.querySelector('#menu') 
          menu.style.left = MouseEvent.clientX - 190 + 'px'
          document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
          menu.style.top = MouseEvent.clientY - 80 + 'px'
          // console.log('右键被点击的event:', MouseEvent)
          // console.log('右键被点击的object:', object)
          // console.log('右键被点击的value:', Node)
          // console.log('右键被点击的element:', element)
          // console.log('鼠标点击了树形结构图')
        }
        public foo() { // 取消鼠标监听事件 菜单栏
            this.menuVisible = false
            document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
          }
        //菜单事件
        public isAddCardPing(){}
        public addCard(){}
        public deleteCard(){}

        public current_change (currentPage:number) {
        // this.currentPage = currentPage - 1
        // this.getmanagement1()
        }
        //详情
        public handleEdit(index:number, row:any){

        }
        //取消
        public handleremove(index:number, row:any){

        }
        //删除
        public handleDelete(index:number, row:any){

        }
        //表格事件
        public handleSelectionChange(){

        }

        

    }
</script>
<style lang="scss">
    .box1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
        .manage-left {
        width: 15%;
        height: 100%;
            .manage-left-top{
                width:100%;
                height:5%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom:  2px;
                background-color: #fff;
            }
            .manage-left-tree{
                width:100%;
                height:95%;
                background-color: #fff;
            }
            .menu__item {
                display: block;
                line-height: 20px;
                text-align: center;
                padding: 6px 0;
                cursor: pointer;
                
              }
                .menu {
                width: 110px;
                position: absolute;
                border-radius: 10px;
                box-shadow:0 0 2px  #999999;
                background-color: #fff;
                z-index: 999;
                padding: 10px 0;
                margin: 0px;
              }
              li:hover {
                background-color: #1790ff;
                color: white;
              }
        }
        .manage-right {
        width: 84%;
        height: 100%;
        padding:0px 5px 5px 5px;
            .manage-right-top{
              width: 100%;
              height: 5%;
              text-align:left;
              display: flex;
              align-items: center;
              padding-left: 20px;
              margin-bottom: 2px;
              background-color: #fff;
            }
            .form{
                width: 100%;
                height: 95%;
                background-color: #fff;
                padding: 10px;
                .button{
                    display: flex;
                    height:5%;
                    width: 100%;
                    padding: 5px;
                }
                .demo-table-expand {
                  font-size: 0;
                }
                .demo-table-expand label {
                  width: 90px;
                  color: #99a9bf;
                }
                .demo-table-expand .el-form-item {
                  margin-right: 0;
                  margin-bottom: 0;
                  width: 50%;
                }
            }
        }


    }
  
</style>
